<template>
  <el-card class="card">
    <br />
    <br />
    <br />
    <el-row>
      <el-col :span="24"
        ><span style="font-size: 20px; margin-left: 100px">安全技术:</span>
        <span
          ><table class="table">
            <tr class="tr">
              <td class="th0" colspan="2" align="left">滩顶高程（m）</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.beachTop"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th0" colspan="2" align="left">全库容（万m3）</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.wholeLibrary"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th0" colspan="2" align="left">尾矿库等别</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.tailingPond"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th0" colspan="2" align="left">筑坝方式</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.damming"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th0" colspan="2" align="left">
                尾矿坝的安全超高（m）
              </td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.security"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th0" colspan="2" align="left">干滩长度（m）</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.dryBeach"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th0" colspan="2" align="left">浸润线埋深（m）</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.line"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th0" align="left" rowspan="3">
                尾矿坝最小抗滑稳定安全系数
              </td>
              <td class="th1" align="left">正常运行</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.normal"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th1" align="left">洪水运行</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.flood"
                />
              </td>
            </tr>
            <tr class="tr">
              <td class="th1" align="left">特殊运行</td>
              <td class="th" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.special"
                />
              </td>
            </tr></table></span
      ></el-col>
    </el-row>
    <br />
    <br />
    <br />
    <br />
    <el-row>
      <el-col :span="24"
        ><span style="font-size: 20px; margin-left: 130px">综述:</span>
        <span
          ><table class="table1">
            <tr class="tr">
              <td class="td1" align="left">坝体稳定性</td>
              <td class="td" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.dam"
                />
                <!-- <span v-if="id == 0">满足设计要求</span>
                <span v-if="id == 1">不满足设计要求</span> -->
              </td>
            </tr>
            <tr class="tr">
              <td class="td1" align="left">防洪能力</td>
              <td class="td" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.controlFlood"
                />
                <!-- <span v-if="id == 0">满足设计要求</span>
                <span v-if="id == 1">不满足设计要求</span> -->
              </td>
            </tr>
            <tr class="tr">
              <td class="td1" align="left">监测设施</td>
              <td class="td" align="left">
                <input
                  type="text"
                  style="
                    width: 500px;
                    height: 34px;
                    border: none;
                    outline: none;
                    font-size: 20px;
                  "
                  v-model="addForm.monitor"
                />
                <!-- <span v-if="id == 0">满足设计要求</span>
                <span v-if="id == 1">不满足设计要求</span> -->
              </td>
            </tr>
          </table></span
        ></el-col
      >
    </el-row>
    <br />
    <br />
    <br />
    <br />
    <el-row type="flex" justify="end">
      <el-col :span="5">
        <el-button type="primary" size="small" @click="upDown()">下载</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import axios from "axios";
import $ from "jquery";
// import TopLabel from "~/components/TopLabel";
// import DesignResourceBody from "~/views/basic-information/design-resources/DesignResourceBody";
// import DesignResourceBody from "../basic-information/design-resources/DesignResourceBody.vue";
export default {
  // name: "EvaluationReport",
  // components: {
  //   DesignResourceBody,
  //   TopLabel,
  // },
  data() {
    return {
      id: 0,
      addForm: {
        beachTop: "",
        wholeLibrary: "",
        tailingPond: "",
        damming: "上游式",
        security: "",
        dryBeach: "",
        line: "",
        normal: "",
        flood: "",
        special: "",
        dam: "",
        controlFlood: "",
        monitor: "",
      },
    };
  },
  mounted() {},
  methods: {
    upDown() {
      // axios({
      //   method: "post",
      //   url: "/analysis/exportAnalysisReport",
      //   data: this.addForm,
      // }).then((res) => {
      //   console.log(res);
      //   window.open(
      //     "http://221.231.138.86:41085/enterprise//analysis/exportAnalysisReport"
      //   );
      // });
      var params = new Array();
      var data = new Array();
      data["beachTop"] = this.addForm.beachTop;
      data["wholeLibrary"] = this.addForm.wholeLibrary;
      data["tailingPond"] = this.addForm.tailingPond;
      data["damming"] = this.addForm.damming;
      data["security"] = this.addForm.security;
      data["dryBeach"] = this.addForm.dryBeach;
      data["line"] = this.addForm.line;
      data["normal"] = this.addForm.normal;
      data["flood"] = this.addForm.flood;
      data["special"] = this.addForm.special;
      data["dam"] = this.addForm.dam;
      data["controlFlood"] = this.addForm.controlFlood;
      data["monitor"] = this.addForm.monitor;
      params["url"] =
        "http://221.231.138.86:41085/enterprise/analysis/exportAnalysisReport";
      params["method"] = "POST";
      params["data"] = data;
      this.DownLoadFile(params);
    },
    DownLoadFile(options) {
      // alert("hello world");
      var config = $.extend(true, { method: "post" }, options);
      var $iframe = $('<iframe id="down-file-iframe" />');
      var $form = $(
        '<form target="down-file-iframe" method="' + config.method + '" />'
      );
      $form.attr("action", config.url);
      for (var key in config.data) {
        $form.append(
          '<input type="hidden" name="' +
            key +
            '" value="' +
            config.data[key] +
            '" />'
        );
      }
      $iframe.append($form);
      $(document.body).append($iframe);
      $form[0].submit();
      $iframe.remove();
    },
  },
};
</script>

<style scoped>
.card {
  margin-top: 8px;
  height: 90.5vh;
  margin-right: 8px;
  overflow: auto;
}
.bm-view {
  width: 80vw;
  height: 91vh;
  background: pink;
}
.img {
  width: auto;
  max-width: 100%;
  height: 80vh;
}
.table {
  border: 1px solid black;
  font-size: 20px;
  margin-left: 230px;
  margin-top: -20px;
  border-collapse: collapse;
}
.table1 {
  border: 1px solid black;
  font-size: 20px;
  margin-left: 230px;
  margin-top: -20px;
  border-collapse: collapse;
}
.tr {
  height: 40px;
  border: 1px solid black;
}

.th {
  width: 500px;
  border: 1px solid black;
  padding-left: 15px;
}
.th1 {
  width: 150px;
  border: 1px solid black;
  padding-left: 15px;
}
.th0 {
  width: 350px;
  border: 1px solid black;
  padding-left: 15px;
}
.td1 {
  width: 300px;
  border: 1px solid black;
  padding-left: 15px;
}
.td {
  width: 720px;
  border: 1px solid black;
  padding-left: 15px;
}
</style>